<template>
    <div>
      <el-card class="box-card">
        <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
        <el-button type="success"  style="margin: 20px;" @click="addFarm">新增</el-button>
        <el-table ref="singleTable" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" highlight-current-row @current-change="handleCurrentChange" border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="name" label="操作名称"  align="center">
          </el-table-column>
          <el-table-column label="是否上传图片"  align="center">
             <template slot-scope="scope">
                <el-tag effect="dark" :type="scope.row.whetherUpload?'success':'info'">{{ scope.row.whetherUpload?'需要':'否' }}</el-tag>
             </template>
          </el-table-column>
          <el-table-column label="是否需要投入品"  align="center">
            <template slot-scope="scope">
                <el-tag effect="dark" :type="scope.row.whetherVariableInput?'success':'info'">{{ scope.row.whetherVariableInput?'需要':'否' }}</el-tag>
             </template>
          </el-table-column>
          <el-table-column  label="应用状态"  align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                @change = "switchChange($event,scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="添加时间"  align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="上次修改时间"  align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row.id)" type="text" >编辑</el-button>
                 <el-button  type="text"   style="color: red;" @click="deleteRow(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
         <div class="pagination-box">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page.sync="info.pageNum"
            :page-size="info.pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
         </div>
      </el-card>
    </div>
  </template>
  <script>
  import {findAllFarmOperator,delFarmOperatorById,addFarmOperator} from '../util/api.js'
  export default {
    data() {
      return {
        info:{
          pageNum:1,
          pageSize:6
        },
        tableData: [

        ],
        currentRow: null,
        total:0,
      }
    },
    mounted(){
         this.getList()
    },
    methods: {
      async getList(){
          let res = await findAllFarmOperator(this.info)
          if(res.code!=200)return
          // console.log(res)
          this.tableData = res.data.rows
          this.total = res.data.total
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      pageChange(val) {
          this.info.pageNum = val
          this.getList()
          // console.log(`当前页: ${val}`);
      },
      deleteRow(row) {
        //  console.log(row)
         this.$confirm('是否删除该操作？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            let res= await  delFarmOperatorById({operatorId:row.id})
            if(res.code!=200)return
            this.getList()
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          })
      },
      switchChange(value,row){
        // console.log(value,row)
        let judge = value == 0 ? "是否关闭？此操作将关闭该状态！" : "开启该状态？";
          this.$confirm(judge, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            let data = {
                 state:value,
                 farmOperatorId:row.id
            }
            let res = await addFarmOperator(data)
              //  console.log(res)
               if(res.code!=200)return 
               row.state = value
               this.$message.success('更改成功！');
          }).catch(()=>{
            this.getList()
          })
      },
      editRow(row){
        this.$router.push({
          path: '/farmOperatorManagement/compile',
          query:{id:row}
        })
      },
      addFarm(){
        this.$router.push({
          path: '/farmOperatorManagement/add'
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .box-card {
    width: 100%;
    margin: 14px 0;
    .pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
      }
    }
  }
  </style>